<template>
    <div class="app-container" >


        <el-form :inline="true" :model="queryForm" >



        </el-form>

        <div class="l_right">
            <el-button @click="search" class="l_button" type="primary" size="small" >
                查询
            </el-button>
            <el-button @click="startSave({})" class="l_button" type="success"  size="small">
             添加
         </el-button>
           <el-button @click="nextSave" :disabled="selectRows.length  == 0" class="l_button"  type="info" size="small">
             批量编辑
         </el-button>
            <el-button @click="deleteByIdIn" :disabled="selectRows.length  == 0"  class="l_button"  type="warning" size="small">
                批量删除
            </el-button>

        </div>
        <div class="l_right">
            <el-button type="primary" size="small" @click="tableDialog = true" >
                表格配置
            </el-button>
        </div>



        <el-table
                :data="list"
                border
                stripe
                @selection-change="handleSelectionChange"
                ref="dataTable"
                style="width: 100%">
            <el-table-column
                    prop="selection"
                    v-if="isColumnShow('selection')"
                    label="多选"
                    type="selection"
                    width="60">
            </el-table-column>
            <el-table-column
                    type="index"
                    label="#"
                    prop="index"
                    v-if="isColumnShow('index')"
                    width="60">
            </el-table-column>




<#list columnList as column>

    <#if column.getFieldName() == 'id'>

    <#elseif column.getFieldName() == 'crtTime'>

    <#elseif column.getFieldName() == 'uptTime'>

    <#elseif column.getFieldName() == 'parentPath'>

    <#elseif column.getFieldName() == 'parentId'>

    <#else >


        <el-table-column
                prop=" ${column.getFieldName()}"
                v-if="isColumnShow('${column.getFieldName()}')"
                label="${column.columnComment}">

        </el-table-column>

    </#if>




</#list>


            <el-table-column
                    v-if="isColumnShow('crtTime')"
                    prop="crtTime"
                    label="创建时间"
                    sortable="custom"
            >
                <template slot-scope="{row}" >

                    {{row.crtTime | dateToString}}
                </template>
            </el-table-column>

           <el-table-column
            prop="oper"
            label="操作"
            width="150"
                 v-if="isColumnShow('oper')"
            >
            <template slot-scope="{row}">
                <el-button @click="startSave(row)" type="primary" size="small" >编辑</el-button>
                <el-button @click="deleteById(row)" type="warning" size="small" >删除</el-button>
                <el-button @click="openChildren(row)" type="warning" size="small" >孩子</el-button>

            </template>
          </el-table-column>
        </el-table>


        <div class="l_page" >
            <el-pagination
                    background
                    @size-change="page"
                    @current-change="page"
                    :current-page.sync="pageNumber"
                    :page-sizes="pageSizes"
                    :page-size.sync="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

        </div>



        <el-dialog
                title="编辑"
                :visible.sync="saveDialog"
                width="700px"
                :before-close="handleClose">
            <div>
                <el-form :rules="validRule" ref="saveForm" label-position="left" label-width="80px" :model="saveForm">


                    <el-form-item  label="父路径" >
                        <el-cascader
                                clearable
                                v-model="saveForm.parentPath"
                                :options="list"
                                :props="options"
                        ></el-cascader>
                    </el-form-item>


                <#list columnList as column>

                    <#if column.getFieldName() == 'id'>

                    <#elseif column.getFieldName() == 'parentPath'>

                    <#elseif column.getFieldName() == 'parentId'>

                    <#elseif column.getFieldName() == 'crtTime'>



                    <#elseif column.getFieldName() == 'uptTime'>

                    <#else >



                    <el-form-item prop="${column.getFieldName()}" label="${column.columnComment}" >
                        <el-input v-model="saveForm.${column.getFieldName()}" ></el-input>
                    </el-form-item>

                    </#if>




                </#list>





                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="submitSave(false)">取 消</el-button>
    <el-button type="primary" @click="submitSave(true)">确 定</el-button>
  </span>
        </el-dialog>


        <el-dialog
                title="表格列配置"
                :visible.sync="tableDialog"
                width="60%"
        >
            <el-table
                    :data="tableColumns"
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="#"
                        prop="index"

                        width="60">
                </el-table-column>
                <el-table-column prop="label" label="列明" ></el-table-column>
                <el-table-column prop="show" label="展示" >
                    <template slot-scope="{row}" >
                        <el-button @click="setColumnShow(row)" type="warning" size="mini" v-if="row.show" >
                            关闭
                        </el-button>
                        <el-button @click="setColumnShow(row)"  type="primary" size="mini"  v-else >
                            启用
                        </el-button>

                    </template>
                </el-table-column>

            </el-table>

            <span slot="footer" class="dialog-footer">
    <el-button @click="tableDialog = false">取 消</el-button>
    <el-button type="primary" @click="tableDialog = false">确 定</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>
    import api from "../api/${className}Api";

    import CrudTable from "@/views/common/CrudTable";
    export default {
        components:{

        },
        mixins:[CrudTable],
        data() {
            return {



                options: {
                    label: "title",
                    value: "id",
                    checkStrictly: true
                },

                validRule:{

                    <#list columnList as column>

                        <#if column.getFieldName() == 'id'>

                        <#elseif column.getFieldName() == 'crtTime'>

                        <#elseif column.getFieldName() == 'uptTime'>

                        <#else >
                            ${column.getFieldName()}: [
                            { required: true, message: '请输入', trigger: 'blur' }
                        ],
                        </#if>
                    </#list>


        }


        };
        },
        mounted() {
            async page() {

                let {list,total} = await api.getTree();
                this.list = list;
                this.total = total;

            },
            async openChildren(row){

                let saveForm = await api.findById(
                        ''
                );

                if(row.parentPath){
                    saveForm.parentPath = [...row.parentPath,row.id];
                }
                this.saveDialog = true;
                this.saveForm = saveForm;



            },

            this.$nextTick(function () {
                this.init(api);
            })
        },
        methods: {
        }
    };
</script>


<style scoped>
    .l_page {
        text-align: center;
        margin: 15px 0px;
    }

    .l_right {
        margin: 10px 0px;
        display: flex;
        justify-content: flex-end;
    }
    .l_button {
        width: 100px;
    }
    .l_form_item{
        width: 49%;
    }
</style>
